<script setup lang="ts">
  import { Button } from 'ant-design-vue';
  import classnames from 'classnames';
  import moment from 'moment';
  import { Button as KingBtn } from 'vue-components-am';

  import { getNum } from './utils/tools';

  // TODO:router pinia

  const state = reactive({
    count: 1,
  });
  console.log(classnames, 'classnames');
  console.log(getNum, 'getNum');
</script>

<template>
  <Button>哈哈</Button>
  <KingBtn></KingBtn>

  <div class="btn">{{ state.count }}</div>
  <div>{{ moment(new Date()).format('YYYY-MM') }}</div>
  <div class="flex flex-col text-red font-bold underline">测试tailwindcss</div>
</template>

<style scoped lang="less">
  .logo {
    padding: 1.5em;
    width: 80px;
    height: 6em;
    color: red;
    transition: filter 300ms;
    will-change: filter;
  }

  .logo:hover {
    filter: drop-shadow(0 0 2em #646cffaa);
  }

  .logo.vue:hover {
    filter: drop-shadow(0 0 2em #42b883aa);
  }
</style>
